---
title: crwdns62072:0crwdne62072:0
image: crwdns62074:0crwdne62074:0
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## crwdns62076:0crwdne62076:0

crwdns62078:0crwdne62078:0

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| crwdns62080:0crwdne62080:0 | crwdns62082:0crwdne62082:0 | crwdns62084:0crwdne62084:0                                                            | crwdns62086:0crwdne62086:0 |
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| crwdns62088:0crwdne62088:0 | crwdns62090:0crwdne62090:0 | crwdns62092:0crwdne62092:0 crwdns62094:0crwdne62094:0 | crwdns62096:0crwdne62096:0 |
| crwdns62098:0crwdne62098:0 | crwdns62100:0crwdne62100:0 | crwdns62102:0crwdne62102:0                                                            |                                                            |
| crwdns62104:0crwdne62104:0 | crwdns62106:0crwdne62106:0 | crwdns62108:0crwdne62108:0                                                            |                                                            |

</Tab>

</Tabs>

## crwdns62110:0crwdne62110:0

crwdns62112:0crwdne62112:0

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| crwdns62114:0crwdne62114:0 | crwdns62116:0crwdne62116:0 | crwdns62118:0crwdne62118:0 |
| ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- |
| crwdns62120:0crwdne62120:0 | crwdns62122:0crwdne62122:0 | crwdns62124:0crwdne62124:0 |
| crwdns62126:0crwdne62126:0 | crwdns62128:0crwdne62128:0 | crwdns62130:0crwdne62130:0 |

</Tab>

</Tabs>
